<template>
  <div class="common-layout">
    <el-container class="listVenues">
      <el-header style="width: 100%;padding: 0px;">
        <Header>活动管理</Header>
      </el-header>
      <el-main>
        <el-main class="main">
          <el-row :gutter="20">
            <el-col :span="4" :offset="1">
              <el-input
                v-model="input2"
                class="w-50 m-2"
                placeholder="优惠券编号"
                :suffix-icon="Search"
                @keyup.enter="search"
              />
            </el-col>
            <el-col :span="3">
              <el-select v-model="value" class="m-2" placeholder="请选择类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :span="1">
              <el-button type="primary" plain @click="searchValue"
                >查询</el-button
              >
            </el-col>
            <el-col :span="2" :offset="7">
              <el-button type="info" @click="add">增加优惠券</el-button>
            </el-col>
            <el-col :span="3" style="text-align: center">
              <el-button type="danger" plain @click="toggleSelection()"
                >批量删除</el-button
              >
            </el-col>
          </el-row>
          <el-main>
            <el-table
              :data="tableData"
              style="width: 100%"
              stripe
              ref="multipleTableRef"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="编号" align="center">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="优惠券名称" width="150" align="center">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="支持课程" width="150" align="center">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <el-icon><timer /></el-icon>
                    <span style="margin-left: 10px">{{
                      scope.row.course
                    }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="类型" width="150" align="center">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <el-icon><Message /></el-icon>
                    <span style="margin-left: 10px">{{ scope.row.state }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="面额" align="center">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.money }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="数量" align="center">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px"
                      >{{ scope.row.num }}/{{ scope.row.total }}</span
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="180">
                <template #default="scope">
                  <el-button
                    size="small"
                    type="text"
                    @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="small"
                    type="text"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-main>
          <el-row :gutter="20">
            <el-colPagination :span="6" :offset="16">
              <!-- <pagination
                :pagesize="query.limit"
                :total="pageTotal"
                :options="query"
                :render="getData"
              ></pagination> -->
            </el-colPagination>
          </el-row>
        </el-main>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from "vue";
import { ElMessage, ElMessageBox, ElTable } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import useStore from "../store/ljh/index";
import Pagination from "../components/ljh/pagination.vue";
import Header from "../components/wangyu/HeaderView.vue";

const store = useStore();
const input2 = ref("");
const value = ref("");
const router = useRouter();
const tableData = store.$state.coupons;
const dialogTableVisible = ref(false);
const options = [
  {
    value: "全部",
    label: "全部",
  },
  {
    value: "课程券",
    label: "课程券",
  },
  {
    value: "商城券",
    label: "商城券",
  },
];

//分页

// 批量删除
const toggleSelection = () => {
  console.log(state.Excel);
};
// 下拉框搜索
const searchValue = () => {
  console.log(value);
};
// input搜索框
const search = () => {
  console.log(input2);
};
// 新增跳转
function add() {
  router.push({ path: "addCoupons", query: { msg: "新增" } });
}
// 编辑跳转
const handleEdit = (scope: any, row: any) => {
  router.push({ path: "addCoupons", query: { id: row.id, msg: "编辑" } });
};
// 删除操作
const handleDelete = (scope: any, row: any) => {
  ElMessageBox.confirm("数据一旦删除将不可恢复！", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      tableData.forEach((element) => {
        if (element.id === row.id) tableData.splice(scope, 1);
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
// 多选选中值
let state = reactive({
  Excel: [],
});
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  state.Excel = [];
  multipleSelection.value = val;
  multipleSelection.value.forEach((el) => {
    state.Excel.push(el);
  });
  return state.Excel;
};
</script>

<style scoped>
.listVenues {
  background-color: rgba(242, 242, 242, 1);
  border-radius: 0 0 30px 30px;
  display: flex;
}
.header {
  background-color: bisque;
  border-radius: 30px 30px 0 0;
}
.main {
  background-color: white;
  border-radius: 20px;
}
</style>
